<template>
  <div ref="loginBG" class="homepage-hero-module">
    <div class="video-container">
      <div :style="fixStyle" class="filter">
        <slot />
      </div>
      <div class="poster">
        <img :style="fixStyle" class="imgblur" :src="siteInfo.background">
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'pinia';
import { useStore } from 'stores/store';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'loginBackground',
  props: {
    outFixStyle: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['update:outFixStyle'],
  data () {
    return {
      videoCanPlay: false,
      fixStyle: '',
      childFixStyle: ''
    };
  },
  mounted () {
    window.onresize = () => {
      const windowWidth = document.body.clientWidth;
      const windowHeight = document.body.clientHeight;
      const windowAspectRatio = windowHeight / windowWidth;
      let videoWidth;
      let videoHeight;
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth;
        videoHeight = videoWidth * 0.5625;
        this.fixStyle = {
          height: windowWidth * 0.5625 + 'px',
          width: windowWidth + 'px',
          'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
          'margin-left': 'initial'
        };
        this.childFixStyle = {
          height: windowHeight + 'px',
          'margin-bottom': (videoHeight - windowHeight) / 2 + 'px'
        };
      } else {
        videoHeight = windowHeight;
        videoWidth = videoHeight / 0.5625;
        this.fixStyle = {
          height: windowHeight + 'px',
          width: windowHeight / 0.5625 + 'px',
          'margin-left': (windowWidth - videoWidth) / 2 + 'px',
          'margin-bottom': 'initial'
        };
        this.childFixStyle = {
          width: windowWidth + 'px',
          'margin-left': (videoWidth - windowWidth) / 2 + 'px'
        };
      }
      this.$emit('update:outFixStyle', this.childFixStyle);
    };
    window.onresize();
  },
  methods: {
    canplay () {
      this.videoCanPlay = true;
    }
  },
  computed: {
    ...mapState(useStore, ['siteInfo'])
  }
});
</script>

<style scoped>
.homepage-hero-module,
.video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-container .poster img {
  z-index: 0;
  position: absolute;
}

.video-container .filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
}

.fillWidth {
  width: 100%;
}
.imgblur {
  filter: blur(2px);
}
</style>
